/************************************************************************************************************************
 ************************************************ xpop.js ******************************************************
 ************************************************************************************************************************/
/**
 * Created on : 2017/03/26
 * Author     : @kankan
 */

// create xpop object
var xpop = xpop || {};

(function() {
    /* xpop.toast */
	xpop = function(options) {
        return new XPop(options);
    };

    /**************************************************
     * XPop
     **************************************************/
    var XPop = function(options) {
		var self = this;
		
		self.$options = options;						// 加了$只是为了区分Js变量而已，可以用来表示这个变量是一个jquery对象，没其他含义
		self.$elem = null;

		self._init();
    };
    
    XPop.prototype = {
        /******************* 私有方法 *******************/
        /* 初始化 */
    	_init: function() {
        	var self = this;

        	self.$options = $.extend({}, XPop.DEFAULTS, self.$options);
            self._createDomElem();
            self.show();
			
	        return self;								// VERY IMPORTANT!!! 这样才能继续调用后面的其它方法
        },
        
        _createDomElem: function() {
            var self = this;
            var xpopWrapper = $('<div class="xpop-wrapper ' + self.$options.maskClass + '"></div>');
            var xpop = $('<div class="xpop weui_dialog"></div>');
            var xpopHead = $('<div class="xpop-head weui_dialog_hd"><strong class="weui_dialog_title">' + self.$options.title + '</strong></div>');
            var xpopBody = $('<div class="xpop-body weui_dialog_bd">' + self.$options.msg + '</div>');
            var xpopFoot = $('<div class="xpop-foot weui_dialog_ft"></div>');

            if (self.$options.content) {
            	xpopBody.append(self.$options.content);
            }
            xpopFoot.append(self._createCustomButtons());

            xpop.append(xpopHead);
            xpop.append(xpopBody);
            xpop.append(xpopFoot);
            xpopWrapper.append(xpop);
            
            self.$elem = xpopWrapper;
        },
        
        _createCustomButtons: function() {
            var self = this;
            var buttons = [];

            for (var i in self.$options.buttons) {
                var buttonOptions = self.$options.buttons[i];
                var button = self._createCustomButton(buttonOptions);		// CALL _createCustomButton: function(type, op) {...
                buttons.push(button);
            }
            
            return buttons;
        },

        _createCustomButton: function(buttonOptions) {
            var self = this;
            var button = $('<a href="javascript:;"></a>')
                    .addClass(buttonOptions['class'])
                    .attr('id', buttonOptions.id)
                    .html(buttonOptions.text);

            if (buttonOptions.handler && typeof buttonOptions.handler === 'function') {
            	button.off('click.xpop').on('click.xpop', function(ev) {
            		ev.stopPropagation();									// 阻止当前事件在DOM树上冒泡
                    buttonOptions.handler(self);
                });
            }
            
            return button;
        },
        
        /* 执行方法 */
        _execFunc: function(type) {
            var self = this;
            
            if (self.$options[type] && typeof self.$options[type] === 'function') {
                self.$options[type](self);
            }
        },
        
        show: function() {
            var self = this;

            self._execFunc('beforeShow');
            $('body').append(self.$elem);
            self._execFunc('afterShow');
        },
        
        destroy: function() {
        	var self = this;

            self._execFunc('beforeClose');
            self.$elem.remove();
            self._execFunc('afterClose');
            
            return self;
        }
    };
    
    // User can set default options to this variable
    XPop.DEFAULTS = {
    	maskClass		: 'weui_mask',
        title			: '', 
        msg				: '', 
        content			: '',
            
        // events
        beforeShow      : null,
        afterShow       : null,
        beforeClose     : null,
        afterClose		: null
    };
})();




/************************************************************************************************************************
 ************************************************ xpop toast.js ******************************************************
 ************************************************************************************************************************/
/**
 * Created on : 2017/03/25
 * Author     : @kankan
 */

//create xpop object
var xpop = xpop || {};

(function() {
    /* xpop.toast */
	xpop.toast = function(options) {
        return new XPopToast(options);
    };

    /**************************************************
     * XPopToast
     **************************************************/
    var XPopToast = function(options) {
		var self = this;
		
		self.$options = options;						// 加了$只是为了区分Js变量而已，可以用来表示这个变量是一个jquery对象，没其他含义
		self.$elem = null;

		self._init();
    };
    
    XPopToast.prototype = {
        /******************* 私有方法 *******************/
        /* 初始化 */
    	_init: function() {
        	var self = this;

        	self.$options = $.extend({}, XPopToast.DEFAULTS, self.$options);
            self._createDomElem();
            self.show();
			
	        return self;								// VERY IMPORTANT!!! 这样才能继续调用后面的其它方法
        },
        
        _createDomElem: function() {
            var self = this;
            var xpopWrapper = $('<div class="xpop-wrapper ' + self.$options.maskClass + '"></div>');
            var xpop = $('<div class="xpop-toast ' + XPopToast.OPTIONS[self.$options.type]['class'] + ' weui_toast"></div>');

            if (self.$options.icon) {
            	xpop.append('<i class="weui_icon_toast ' + XPopToast.OPTIONS[self.$options.type].icon + '"></i>');
            } else {
            	xpop.addClass('without-icon');
            }
            xpop.append('<p class="weui_toast_content">' + self.$options.msg + '</p>');

            xpopWrapper.append(xpop);
            
            self.$elem = xpopWrapper;
            
        	self._addDelay(self.$elem);
            self._addCloseOnClick(self.$elem);
        },
        
        _addDelay: function($elem) {
        	var self = this;
        	
            if (!self.$options.delay) {
                return;
            }

            setTimeout(function() {
                self.destroy();
            }, self.$options.delay);
        },
        
        _addCloseOnClick: function($elem) {
        	var self = this;
        	
            if (!self.$options.closeOnClick) {
                return;
            }
            $elem.click(function() {
                self.destroy();
            });
        },
        
        show: function() {
            var self = this;

            $('body').append(self.$elem);
        },
        
        destroy: function() {
        	var self = this;
            self.$elem.remove();

            if (self.$options.afterClose && typeof self.$options.afterClose === 'function') {
                self.$options.afterClose(self);
            }
            return self;
        }
    };
    
    // This variable is necessary.
    XPopToast.OPTIONS = {
        success: {
            'class': 'xpop-toast-success',
            'icon': 'ion-ios-checkmark'
        },
        warning: {
            'class': 'xpop-toast-warning',
            'icon': 'ion-ios-information'
        },
        error: {
            'class': 'xpop-toast-error',
            'icon': 'ion-ios-minus'
        }
    };
    
    // User can set default options to this variable
    XPopToast.DEFAULTS = {
    	maskClass: 'weui_mask_default',
        msg: '', 
        icon: true,
        delay: 3000,
        closeOnClick: true,
        afterClose: null
    };
})();